<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
  <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>

</head>

<body>
  <div id="app">
    <div>
      <div>
        <avue-avatar :size="64" icon="el-icon-circle-plus-outline"></avue-avatar>
        <avue-avatar size="large" icon="el-icon-circle-plus-outline"></avue-avatar>
        <avue-avatar icon="el-icon-circle-plus-outline"></avue-avatar>
        <avue-avatar size="small" icon="el-icon-circle-plus-outline"></avue-avatar>
      </div>
      <br />
      <div>
        <avue-avatar shape="square" :size="64" icon="el-icon-circle-plus-outline"></avue-avatar>
        <avue-avatar shape="square" size="large" icon="el-icon-circle-plus-outline"></avue-avatar>
        <avue-avatar shape="square" icon="el-icon-circle-plus-outline"></avue-avatar>
        <avue-avatar shape="square" size="small" icon="el-icon-circle-plus-outline"></avue-avatar>
      </div>
      <br />
      <div>
        <avue-avatar icon="el-icon-circle-plus-outline"></avue-avatar>
        <avue-avatar>U</avue-avatar>
        <avue-avatar>USER</avue-avatar>
        <avue-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></avue-avatar>
        <avue-avatar style="color: #f56a00; background-color: #fde3cf">U</avue-avatar>
        <avue-avatar style="background-color:#87d068" icon="el-icon-circle-plus-outline"></avue-avatar>
      </div>
      <br />
      <div>
        <avue-avatar shape="square" size="large" :style="{backgroundColor: color, verticalAlign: 'middle'}">
          {{avatarValue}}</avue-avatar>
        <el-button size="small" :style="{ marginLeft: 16, verticalAlign: 'middle' }" @click="changeValue">改变</el-button>
      </div>
    </div>
  </div>
</body>
<script>
  const UserList = ['U', 'Lucy', 'Tom', 'Edward']
  const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
  new Vue({
    el: '#app',
    data() {
      return {
        avatarValue: UserList[0],
        color: colorList[0],
      }
    },
    methods: {
      changeValue() {
        const index = UserList.indexOf(this.avatarValue)
        this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
        this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
      },
    },
  })
</script>

</html>